<template>
<div>
<div class="toolbar card" style="margin-bottom:10px;">
<el-select v-model="filterCustomer" placeholder="筛选客人" clearable style="width:200px;">
<el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id"/>
</el-select>
<el-select v-model="filterCourier" placeholder="筛选配送员" clearable style="width:200px; margin-left:10px;">
<el-option v-for="c in couriers" :key="c.id" :label="c.name" :value="c.id"/>
</el-select>
</div>
<el-table :data="filteredOrders" stripe highlight-current-row class="card">
<el-table-column prop="id" label="订单号" width="120"/>
<el-table-column label="客人" width="120">
<template slot-scope="{ row }">{{ customersMap[row.customerId]?.name || '—' }}</template>
</el-table-column>
<el-table-column label="配送员" width="120">
<template slot-scope="{ row }">{{ couriersMap[row.courierId]?.name || '—' }}</template>
</el-table-column>
<el-table-column label="商品明细">
<template slot-scope="{ row }">
<ul><li v-for="it in row.items" :key="it.id">{{ it.name }} x {{ it.count }}</li></ul>
</template>
</el-table-column>
<el-table-column prop="time" label="下单时间" width="180"/>
<el-table-column label="状态" width="120">
<template slot-scope="{ row }">
<el-tag :type="tagType(row.status)">{{ statusText(row.status) }}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="180">
<template slot-scope="{ row }">
<el-button size="mini" v-if="row.status==='pending'" type="primary"
@click="changeStatus(row.id,'shipped')">发货</el-button>
<el-button size="mini" v-if="row.status==='shipped'" type="success"
@click="changeStatus(row.id,'completed')">完成</el-button>
<el-button size="mini" type="danger" @click="deleteOrder(row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination background layout="prev, pager, next"
:current-page.sync="page" :page-size="pageSize"
:total="filteredOrders.length" @current-change="page=$event"
class="pagination"/>
</div>
</template>

<script>
export default {
data() {
return {
customers: [ {id:1,name:'张三'}, {id:2,name:'李四'},{id:3,name:'王五'} ],
couriers: [ {id:1,name:'王小明'}, {id:2,name:'李小红'},{id:3,name:'张小刚'} ],
orders: [
{ id:1001,customerId:1,courierId:1,items:[{id:1,name:'苹果',count:2}],time:'2025-05-27 10:00',status:'pending' },
{ id:1002,customerId:2,courierId:2,items:[{id:2,name:'香蕉',count:1}],time:'2025-05-27 11:15',status:'shipped' }
],
filterCustomer:null,filterCourier:null,
page:1,pageSize:5
}
},
computed:{
customersMap(){return this.customers.reduce((m,c)=>(m[c.id]=c,m),{})},
couriersMap(){return this.couriers.reduce((m,c)=>(m[c.id]=c,m),{})},
filteredOrders(){
let list=this.orders
if(this.filterCustomer) list=list.filter(o=>o.customerId===this.filterCustomer)
if(this.filterCourier) list=list.filter(o=>o.courierId===this.filterCourier)
const s=(this.page-1)*this.pageSize
return list.slice(s,s+this.pageSize)
}
},
methods:{
statusText(s){return{'pending':'待发货','shipped':'已发货','completed':'已完成'}[s]||'—'},
tagType(s){return{'pending':'warning','shipped':'info','completed':'success'}[s]||'default'},
changeStatus(id,next){const o=this.orders.find(x=>x.id===id);o&&(o.status=next,this.$message.success('状态更新'))},
deleteOrder(id){this.$confirm('确认删除？','提示',{type:'warning'}).then(()=>{this.orders=this.orders.filter(o=>o.id!==id);this.$message.success('删除成功')}).catch(()=>{})}
}
}
</script>

<style scoped>
@import '@/assets/theme.css';
.card{background:var(--color-card-bg);border-radius:8px;box-shadow:0 4px 12px var(--color-card-shadow);margin-top:20px;}
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:10px;}
.pagination{margin-top:15px;text-align:right;}
ul{margin:0;padding-left:18px;}
</style>